<!--
 * @FilePath: index.vue
 * @Author: 杜芬
 * @Date: 2022-08-04 08:52:02
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-08-04 09:52:35
 * Copyright: 2022 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: panel组件页面
-->
<template>
  <div class="comm-panel c-panel">
    <div class="head" v-if="title">
      <slot name="head">
        <div class="title">
          {{ title }}
        </div>
        <div class="expand">
          <slot name="expand"></slot>
        </div>
      </slot>
    </div>
    <div v-loading="isOnLoading" class="content">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Panel',
  props: {
    title: {
      type: String,
      default: '',
    },
    isOnLoading: {
      type: Boolean,
      default: '',
    },
  },
};
</script>
<style lang="scss" scoped>
.comm-panel {
  width: 100%;
  // height: 100%;
  // background-color: #1f2a65; // 全局背景色
  background-color: #2f3d8a;
  // background-color: #fafafa;
  border: #374490 1px solid;
  & > .head {
    width: 100%;
    padding: 10px 20px;
    border-bottom: 1px solid #2b387e;
    position: relative;
    background-color: #374490;

    & > .titlt {
      font-size: 14px;
      font-weight: bold;
      display: inline-block;
    }
    & > .expand {
      position: absolute;
      top: 50%;
      right: 20px;
      transform: translateY(-50%);
    }
  }

  & > .content {
    padding: 12px 20px;
    flex: 1;
    position: relative;
  }

  &.body-padding-none {
    & > .content {
      padding: 0;
    }
  }

  &.panel-flex {
    display: flex;
    flex-direction: column;
  }
  &.panel-content-flex-col {
    & > .content {
      display: flex;
      flex-direction: column;
    }
  }

  &.panel-content-fill {
    & > .content {
      height: calc(100% - 40px);
      overflow: auto;
    }
  }

  &.expand-position-static {
    & > .head {
      display: flex;
      justify-content: space-between;

      & > .title {
        margin-right: 40px;
        white-space: nowrap;
      }

      & > .expand {
        position: static;
        transform: none;
        flex: 1;
        overflow: hidden;
      }
    }
  }

  &.panel-only-form {
    & > .content {
      ::v-deep {
        .el-form {
          margin-bottom: -22px;
        }
        .btn-group {
          padding-top: 4px;
          margin-bottom: 22px;
          display: inline-block;
        }
      }
    }
  }
}
</style>
